<template>
  <div :id="localUUID" class="c-chartpie"></div>
</template>

<script>
import moment from 'moment'
import { Chart } from '@antv/g2'
import { createUUID } from '@/common/js/mUtils'
import componentRefresh from '@/mixins/componentRefresh'
import { cloneDeep } from 'lodash'
import * as echarts from 'echarts'
import 'echarts-wordcloud'
// 准备数据

export default {
  name: 'CWordcloud',
  // mixins: [componentRefresh],
  props: {
    props: {
      type: Array,
      default: function() {
        return [
          {
            fields: []
          }
        ]
      }
    },
    width: {
      type: Number,
      default: 300
    },
    height: {
      type: Number,
      default: 300
    },
    uuid: String
  },
  data() {
    return {
      localUUID: createUUID(),
      chartInstance: null,
      mappings: []
    }
  },
  computed: {
    dataTrigger() {
      if (this.props[1].fields[0].value.dataJson.json) {
        const result = this.props[1].fields[0].value.dataJson.json
        let dataobj = '{}'
        try {
          dataobj = JSON.parse(result)
        } catch (e) {
          console.warn(e)
          this.$message.error('JSON格式有误请重试')
          dataobj = {}
        }
        return dataobj
      } else {
        return ''
      }
    },
    modelTrigger() {
      return this.props[1].fields[0].value.dataJson.model
    }
  },
  watch: {
    dataTrigger(val) {
      if (val && this.chartInstance) {
        this.chartInstance.clear()
        this.initData()
      }
    },
    modelTrigger() {
      if (this.chartInstance) {
        this.chartInstance.clear()
        this.initData()
      }
    },
    width() {
      this.resizeChart()
    },
    height() {
      this.resizeChart()
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      this.initMapping()
      const mData = this.dataTrigger
      const option = {
        series: [
          {
            type: 'wordCloud',

            // The shape of the "cloud" to draw. Can be any polar equation represented as a
            // callback function, or a keyword present. Available presents are circle (default),
            // cardioid (apple or heart shape curve, the most known polar equation), diamond (
            // alias of square), triangle-forward, triangle, (alias of triangle-upright, pentagon, and star.
            shape: 'circle',
            // A silhouette image which the white area will be excluded from drawing texts.
            // The shape option will continue to apply as the shape of the cloud to grow.

            // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
            // Default to be put in the center and has 75% x 80% size.
            left: 'center',
            top: 'center',
            width: '100%',
            height: '100%',
            right: null,
            bottom: null,
            // Text size range which the value in data will be mapped to.
            // Default to have minimum 12px and maximum 60px size.
            sizeRange: [12, 55],
            // Text rotation range and step in degree. Text will be rotated randomly in range [-90, 90] by rotationStep 45
            rotationRange: [-45, 0, 45, 90],
            rotationStep: 45,
            // size of the grid in pixels for marking the availability of the canvas
            // the larger the grid size, the bigger the gap between words.
            gridSize: 1,

            // set to true to allow word being draw partly outside of the canvas.
            // Allow word bigger than the size of the canvas to be drawn
            drawOutOfBound: false,
            // If perform layout animation.
            // NOTE disable it will lead to UI blocking when there is lots of words.
            layoutAnimation: true,
            // 随机生成字体颜色
            // maskImage: maskImage, //字体以图片形状分布，支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
            textStyle: {
              fontFamily: 'sans-serif',
              fontWeight: 'bold',
              // Color can be a callback function or a color string
              color: function() {
                // Random color
                return (
                  'rgb(' +
                  [
                    Math.round(Math.random() * 255),
                    Math.round(Math.random() * 255),
                    Math.round(Math.random() * 255)
                  ].join(',') +
                  ')'
                )
              }
            },
            // 数据
            data: mData
          }
        ]
      }
      // 初始化echarts实例
      this.chartInstance = echarts.init(document.getElementById(this.localUUID))
      // 使用制定的配置项和数据显示图表
      this.chartInstance.setOption(option)
    },
    resizeChart() {
      const width = parseInt(this.width)
      const height = parseInt(this.height)
      this.chartInstance.resize(width, height)
    },
    initMapping() {
      // 读取自定义数据
      const model = this.props[1].fields[0].value.dataJson.model
      this.mappings = model.map(m => {
        const field = m.field
        const mapping = m.mapping
        const key = mapping || field
        return { field: key }
      })

      if (!this.props[1].fields[0].value.dataJson.json) {
        this.mappings = [
          {
            field: 'name'
          },
          {
            field: 'value'
          }
        ]
      }
    }
  }
}
</script>

<style scoped>
.c-chartpie {
  width: 100%;
  height: 100%;
}
</style>
